<template>
  <el-dialog title="题目详情" :visible.sync="dialogVisible" width="950px" append-to-body>
    <div v-loading="loading">
      <!-- 题目基本信息 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">📋 题目信息</span>
</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="题目名称" :span="2">
            <span class="topic-title">{{ topic.title }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="难度等级">
            <el-tag :type="getDifficultyType(topic.difficulty)" size="small">{{ topic.difficulty }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="剩余名额">
            <el-tag :type="getRemainingTagType(topic)" size="small">
              {{ topic.maxStudents - (topic.currentStudents || 0) }} 个名额
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="最大名额">{{ topic.maxStudents }}</el-descriptions-item>
          <el-descriptions-item label="当前已报名">
            <span :class="getRemainingClass(topic)">
              {{ topic.currentStudents || 0 }} 人
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 教师详细信息 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">👨‍🏫 指导教师</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="教师姓名">
            <span class="teacher-name-highlight">
              <i class="el-icon-user"></i>
              {{ topic.teacherName }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="职称">
            <el-tag type="warning" size="small" v-if="topic.teacherTitle">{{ topic.teacherTitle }}</el-tag>
            <span v-else style="color: #909399;">-</span>
          </el-descriptions-item>
          <el-descriptions-item label="工号">
            {{ topic.teacherNo || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="联系邮箱">
            <span v-if="topic.teacherEmail" class="email-text">
              <i class="el-icon-message"></i>
              {{ topic.teacherEmail }}
            </span>
            <span v-else style="color: #909399;">-</span>
          </el-descriptions-item>
          <el-descriptions-item label="办公室位置" :span="2">
            <span v-if="topic.officeLocation">
              <i class="el-icon-location-outline"></i>
              {{ topic.officeLocation }}
            </span>
            <span v-else style="color: #909399;">-</span>
          </el-descriptions-item>
          <el-descriptions-item label="指导学生情况">
            <el-tag :type="getTeacherLoadType(topic)" size="small">
              {{ topic.teacherCurrentStudents || 0 }} / {{ topic.teacherMaxStudents || 0 }} 人
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="研究方向" :span="2">
            <div v-if="topic.researchDirection" class="research-direction-tags">
              <el-tag
                v-for="(direction, index) in parseResearchDirection(topic.researchDirection)"
                :key="index"
                type="info"
                effect="plain"
                size="small"
              >{{ direction }}</el-tag>
            </div>
            <span v-else style="color: #909399;">-</span>
          </el-descriptions-item>
          <el-descriptions-item label="教师简介" :span="2" v-if="topic.introduction">
            <div class="introduction-text">{{ topic.introduction }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 技术标签 -->
      <el-card shadow="never" class="detail-card" v-if="topic.tags && topic.tags !== '[]'">
        <div slot="header" class="clearfix">
          <span class="card-title">🏷️ 技术标签</span>
        </div>
        <div class="tech-tags-container">
          <el-tag
            v-for="tag in parseTags(topic.tags)"
            :key="tag"
            type="info"
            effect="plain"
            size="medium"
          >{{ tag }}</el-tag>
        </div>
      </el-card>

      <!-- 题目描述 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">📝 题目描述</span>
        </div>
        <div class="content-text">
          {{ topic.description || '暂无描述' }}
        </div>
      </el-card>

      <!-- 技能要求 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">💡 技能要求</span>
        </div>
        <div class="content-text">
          {{ topic.requirements || '暂无要求' }}
        </div>
      </el-card>

      <!-- 提示信息 -->
      <el-alert
        v-if="isTopicPendingModification"
        title="温馨提示：该题目正在修改审核中"
        type="warning"
        :closable="false"
        show-icon
        style="margin-top: 20px;"
      >
        <template slot="default">
          教师正在对题目进行完善和调整，您可以先查看当前信息并报名，但请注意：审核通过后题目的具体内容可能会有所变化。如您对此有顾虑，建议等待教师修改完成并通过审核后再做选择。
        </template>
      </el-alert>
      <el-alert
        v-if="isTopicFull(topic)"
        title="该题目已满员，无法报名"
        type="warning"
        :closable="false"
        show-icon
        style="margin-top: 20px;"
      />
      <el-alert
        v-else
        title="请仔细阅读题目要求和教师信息，确认符合条件后再报名"
        type="info"
        :closable="false"
        show-icon
        style="margin-top: 20px;"
      />
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getTopicDetail } from "@/api/system/topic";

export default {
  name: "TopicDetail",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 是否显示弹出层
      dialogVisible: false,
      // 题目信息
      topic: {}
    };
  },
  computed: {
    /** 判断题目是否处于修改审核中 */
    isTopicPendingModification() {
      return this.topic.auditStatus === '修改待审核' && this.topic.hasPendingChanges === 1;
    }
  },
  methods: {
    /** 打开对话框 */
    openDialog(topicId) {
      this.reset();
      this.loading = true;
      this.dialogVisible = true;
      getTopicDetail(topicId).then(response => {
        this.topic = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
        this.dialogVisible = false;
      });
    },
    
    // 重置
    reset() {
      this.topic = {};
    },
    
    /** 判断题目是否已满 */
    isTopicFull(topic) {
      return topic.currentStudents >= topic.maxStudents;
    },
    
    /** 解析标签 */
    parseTags(tags) {
      if (!tags) return [];
      try {
        return JSON.parse(tags);
      } catch (e) {
        return [];
      }
    },
    
    /** 解析研究方向（逗号分隔） */
    parseResearchDirection(direction) {
      if (!direction) return [];
      return direction.split(',').map(d => d.trim()).filter(d => d);
    },
    
    /** 难度等级标签类型 */
    getDifficultyType(difficulty) {
      const map = {
        '简单': 'success',
        '中等': '',
        '困难': 'danger'
      };
      return map[difficulty] || 'info';
    },
    
    /** 剩余名额样式 */
    getRemainingClass(topic) {
      const remaining = topic.maxStudents - (topic.currentStudents || 0);
      if (remaining === 0) return 'text-danger';
      if (remaining <= 2) return 'text-warning';
      return 'text-success';
    },
    
    /** 剩余名额标签类型 */
    getRemainingTagType(topic) {
      const remaining = topic.maxStudents - (topic.currentStudents || 0);
      if (remaining === 0) return 'danger';
      if (remaining <= 2) return 'warning';
      return 'success';
    },
    
    /** 教师负荷标签类型 */
    getTeacherLoadType(topic) {
      if (!topic.teacherMaxStudents) return 'info';
      const current = topic.teacherCurrentStudents || 0;
      const max = topic.teacherMaxStudents;
      const ratio = current / max;
      if (ratio >= 0.9) return 'danger';
      if (ratio >= 0.7) return 'warning';
      return 'success';
    }
  }
};
</script>

<style scoped lang="scss">
.detail-card {
  margin-bottom: 20px;
  
  &:last-of-type {
    margin-bottom: 0;
  }
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.topic-title {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.teacher-name-highlight {
  color: #606266;
  font-size: 15px;
  font-weight: bold;
  
  i {
    margin-right: 5px;
    color: #409EFF;
  }
}

.email-text {
  color: #409EFF;
  
  i {
    margin-right: 5px;
  }
}

.research-direction-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  
  .el-tag {
    font-size: 13px;
  }
}

.introduction-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
}

.tech-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  
  .el-tag {
    font-size: 14px;
    padding: 8px 16px;
  }
}

.content-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.text-success {
  color: #67C23A;
  font-weight: bold;
}

.text-warning {
  color: #E6A23C;
  font-weight: bold;
}

.text-danger {
  color: #F56C6C;
  font-weight: bold;
}

::v-deep .el-descriptions-item__label {
  width: 120px;
  font-weight: bold;
}
</style>